<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css" media="all"/>
    <title>公司部门列表</title>
</head>
<body>
<div style="width: 95%;height: 95%;margin: auto">
    <div>
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <lable class="layui-form-label">部门名称:</lable>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="name" placeholder="搜索部门名称">
                    </div>
                </div>
                <div class="layui-inline">
                    <lable class="layui-form-label">状态:</lable>
                    <div class="layui-input-inline">
                        <select id="flag">
                            <option value="">状态</option>
                            <option value="1">正常</option>
                            <option value="2">无效</option>
                        </select>
                    </div>
                </div>
                <button class="layui-btn layui-icon layui-icon-search" type="button" id="searchBtn">搜索</button>
                <button class="layui-btn layui-btn-primary layui-icon layui-icon-refresh-1" type="reset" >重置</button>
            </div>
        </form>
    </div>
    <hr class="layui-bg-green"/>
    <div>
        <table id="dataTable" lay-filter="dataTableFilter"></table>
    </div>
</div>

<script type="text/html" id="headBtns">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>
</script>

<script type="text/html" id="rowBtns">
    <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">
        <i class="layui-icon">&#xe640;</i> 删除
    </button>
</script>

<script type="text/html" id="editTpl">
    <div style="margin-top: 20px;margin-left:25px">
        <form class="layui-form layui-form-pane" lay-filter="editFormFilter">
            <div class="layui-form-item">
                <label class="layui-form-label">部门名称</label>
                <div class="layui-input-inline">
                    <input class="layui-input" name="deptName" placeholder="部门名称" lay-verify="required" lay-reqText="部门名称不能为空"/>
                </div>
            </div>
            <button id="submitBtn" lay-submit lay-filter="submitBtnFilter" style="display: none"></button>
        </form>
    </div>
</script>

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.use(['table','jquery','layer','form'],function () {
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        //渲染表单
        var t = table.render({
            id:"dataTableId",
            elem:"#dataTable",
            toolbar:'#headBtns',
            page:true,
            height:500,
            url:'${pageContext.request.contextPath}/comp/depart/page.do',
            response:{
                "statusCode": 200
            },
            parseData:function(rs){
                if (rs.code != 200){
                    layer.msg(rs.msg);
                    return false;
                }
                return {
                    "code": rs.code, //解析接口状态
                    "msg": rs.msg, //解析提示文本
                    "count": rs.data.count, //解析数据长度
                    "data": rs.data.data //解析数据列表
                }
            },
            cols:[[
                {field:'id',title:'部门ID'},
                {field:'deptName',title:'部门名称'},
                {field:'flag',title:'部门状态',templet:function (d) {
                        if (d.flag == 1){
                            return "<b style='color:green'  >正常</b>";
                        }else if (d.flag == 2){
                            return "<b style='color:red'>无效</b>";
                        }
                    }},
                {title:'操作',toolbar:'#rowBtns',fixed:'right'},
            ]],
        });
        //为查询按钮绑定搜索功能
        $("#searchBtn").click(function () {
            var deptName = $("#name").val();
            var flag = $("#flag").val();
            t.reload({
                where:{
                    deptName:deptName,
                    flag:flag,
                    page:1
                }
            });
        });

        table.on("toolbar(dataTableFilter)",function (d) {
            var event = d.event;
            if (event == 'add'){
                add();
            }
        })
        //添加方法
        function add() {
            layer.open({
                title:'编辑',
                type:1,
                content:$("#editTpl").html(),
                area:['350px','180px'],
                success:function (layero,index) {
                    form.on('submit(submitBtnFilter)',function (d) {
                        var data = d.field;
                        //更新表格
                        updateTable("comp/depart/add.do",data,index);

                        return false;//阻止表单默认提交
                    });
                },
                btn:['确认','取消'],
                btnAlign:'c',
                yes:function (index,layero) {
                    $("#submitBtn").click();
                }
            })
        }

        table.on("tool(dataTableFilter)",function (d) {
            var event = d.event;
            if (event == 'del'){
                del(d.data);
            }
        })
        //删除部门方法
        function del(data) {
            layer.confirm("确定删除吗?",function (index) {
                updateTable("comp/depart/delete.do",{id:data.id},index);
            });
        }


        function  updateTable(url,data,index) {
            $.post("${pageContext.request.contextPath}/"+url,data,function (rs) {
                if (rs.code != 200){
                    layer.msg(rs.msg);
                    return false;
                }
                layer.msg(rs.msg);
                //点击搜索刷新刷新数据
                $("#searchBtn").click();
                //关闭弹出层
                layer.close(index);
            });
        }
    });
</script>
</body>
</html>
